<template>
  <q-page class="container" style="padding: 50px 0;">
    <q-header bordered class="bg-info text-dark q-py-sm">
      <q-toolbar>
        <q-btn icon="arrow_back_ios" flat dense round color="grey-8" @click="$router.back()" />
        <q-avatar size="68px" style="border-radius: 10px;">
          <img :src="consumer.headimg || '/images/avatar.png'">
        </q-avatar>
        <div class="q-ml-sm">
          <div class="text-bold text-h6">{{ consumer.nickname }}</div>
          <div>{{ consumer.fullname }} 您好</div>
        </div>
        <q-space />
        <q-btn label="设置" flat dense color="grey-10" to="/shop/setting" />
      </q-toolbar>
    </q-header>

    <q-page-sticky position="top" expand class="bg-info text-white q-px-md q-py-sm" style="z-index: 99;">
      <q-input v-model="filter.query" :placeholder="'搜索我的 ' + pagination.rowsNumber + ' 个采购单...'" dense standout rounded clearable class="fit">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </q-page-sticky>

    <q-infinite-scroll @load="onLoad" :offset="250">
      <div v-for="(item, idx) in data" :key="idx" class="q-px-md q-pt-lg">
        <q-card flat style="border-radius: 15px;">
          <q-card-section class="flex items-center" @click="goShop(item)">
            <div class="text-bold q-mr-md" style="font-size: 16px;">{{ item.shop_name }}</div>
            <q-icon name="arrow_forward_ios" color="grey-8" />
            <q-space />
            <div class="flex items-center justify-end">
              <div class="q-mr-sm">采购金额</div>
              <div class="text-bold text-pink" style="font-size: 14px; line-height: normal;">¥<a style="font-size:24px;">{{ splitMoney(item.total_money)[0] }}</a>{{ splitMoney(item.total_money)[1] }}</div>
            </div>
            <div v-if="item.status === 'cancel'" class="text-grey-8">已取消</div>
          </q-card-section>

          <q-card-section>
            <settleItem v-for="(detail, idx) in item.t_sale_details" :key="idx" :item="detail" />
          </q-card-section>

          <q-card-section v-if="item.expand">
            <q-list bordered separator dense>
              <q-item>
                <q-item-section class="text-grey-8">下单日期</q-item-section>
                <q-item-section>{{ item.create_date }}</q-item-section>
              </q-item>

              <q-item>
                <q-item-section class="text-grey-8">单号</q-item-section>
                <q-item-section>{{ item.bill_no }}</q-item-section>
              </q-item>

              <q-item>
                <q-item-section class="text-grey-8">备注</q-item-section>
                <q-item-section>{{ item.remark }}</q-item-section>
              </q-item>

              <q-item>
                <q-item-section class="text-grey-8">收货人</q-item-section>
                <q-item-section>{{ item.consignee }}</q-item-section>
              </q-item>

              <q-item>
                <q-item-section class="text-grey-8">手机号</q-item-section>
                <q-item-section>{{ item.tel }}</q-item-section>
              </q-item>

              <q-item>
                <q-item-section class="text-grey-8">收货地址</q-item-section>
                <q-item-section>{{ item.address }}</q-item-section>
              </q-item>
            </q-list>
          </q-card-section>

          <q-btn :icon="item.expand ? 'expand_less' : 'expand_more'" :label="item.expand ? '收起' : '更多'" outline size="sm" dense class="full-width" rounded color="grey-6" @click="item.expand = !item.expand" />
        </q-card>
      </div>
    </q-infinite-scroll>

  </q-page>
</template>

<script>
import { defineComponent } from 'vue';
import settleItem from './components/settleItem.vue';

export default defineComponent({
  name: 'shopProfile',
  components: { settleItem },
  data () {
    return {
      consumer: {},
      data: [],
      pagination: {
        sortBy: '',
        descending: true,
        page: 1,
        rowsPerPage: 20,
        rowsNumber: 0
      },
      filter: { // 过滤条件
        query: ''
      }
    };
  },
  mounted () {
    const token = this.$q.localStorage.getItem('consumerToken');
    const consumer = this.$q.localStorage.getItem('consumer');

    if (token && consumer) {
      this.consumer = consumer;
    } else {
      this.$router.replace({ path: '/shop/login' });
    }

    this.fetchData();
  },
  methods: {
    fetchData () {
      const token = this.$q.localStorage.getItem('consumerToken');

      const { page, rowsPerPage, sortBy, descending } = this.pagination;
      const filter = this.filter;

      const startRow = (page - 1) * rowsPerPage;
      const count = rowsPerPage;
      this.$axios.post('/c/shop/orderList', { startRow, count, filter, sortBy, descending }, { headers: { conAuth: token } }).then(({ data }) => {
        this.pagination.rowsNumber = data.rowsNumber;
        this.data = data.data;
        this.pagination.page = page;

        for (const row of this.data) {
          row.expand = false; // 订单是否展开
          for (const detail of row.t_sale_details) {
            detail.deliveryExpand = false;
          }
        }
      });
    },
    onLoad (index, done) {
      if (this.pagination.rowsNumber > this.data.length) {
        this.pagination.page = index;
        this.fetchData();
      }

      done();
    },
    goShop (shop) {
      const path = { path: `/shop/${shop.shopId}/list` };
      this.$router.push(path);
    },
    splitMoney (money) {
      const arr = String(Number(Number(money).toFixed(2))).split('.');
      if (arr.length === 1) {
        return [arr[0], ''];
      } else {
        return [arr[0], '.' + arr[1]];
      }
    }
  },
  watch: {
    'filter.query' () {
      this.fetchData();
    }
  }
});
</script>

<style lang="scss">

.container {
  position: relative;
  background-color: $grey-2;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* 上半部分高度 */
  background: linear-gradient(to bottom, $info, $grey-2); /* 渐变背景 */
}
</style>
